<template>
    <Header></Header>
    <div class="content">
        <div class="body">
            <!-- 左边排行榜 -->
            <section class="common-bo" style="align-items: self-start;">
                <div class="job-rank-wrap">
                    <h3 class="title">精选实习榜</h3>
                    <div class="bear rank-item" v-for="(,index) in 6" :key="index">
                        <img v-if="awardGrade[index]" :src="awardGrade[index]"></img>
                        <span v-else>{{ index }}</span>
                        <span>内容策略实习生</span>
                        <span>150/天</span>
                        <span>腾讯</span>
                    </div>
                </div>
            </section>
            <!-- 右边轮播图 -->
            <div class="right">
                <div class="right-sweip">
                    <el-carousel height="259px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <el-image
                                src="https://publicqn.saikr.com/2c9e31480eef40522e91305c0fa9a8351708332932977.png"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="right-botto">
                        <el-image v-for=" in 3" style="height: 120px; border-radius: 10px"
                            src="https://publicqn.saikr.com/e2958646c716d068de76e3a1060e40691705040244067.png"></el-image>
                    </div>
                </div>
            </div>
        </div>

        <div class="recruit-floor">
            <div class="floor-title">
                <span>招聘动态</span>
            </div>
            <div class="floor-list">
                <div v-for=" in 8" class="list-item">
                    <el-image style="height: 142px; width: 253px;"
                        src="https://publicqn.saikr.com/6661f591aaa98321b34ea395e02528b71639734621480.jpg"></el-image>
                    <span>来涂鸦 画世界—2022届涂鸦智能秋季校园招聘</span>
                </div>
            </div>
        </div>
        <div class="practice-floor">
            <div class="floor-title">
                <span>推荐实习</span>
            </div>
            <div class="floor-list">
                <div v-for=" in 30" class="list-item">
                    <div class="item-top">
                        <div class="top-title">
                            <span>海外商业化销售支持实习生</span>
                            <span>150/天</span>
                        </div>
                        <div class="top-bottom">
                            <span>北京</span>
                            <span>4天/周</span>
                            <span>本科</span>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <div class="bottom-company">
                            <el-image style="width: 40px; height: 40px; border-radius: 10px; "
                                src="http://publicqn.saikr.com/company/4889e059a4f62d29fdfdbf7b526209ca1462780129789.jpg"></el-image>
                            <span>小米</span>
                        </div>
                        <div class="bottom-info">
                            <span>未融资</span>
                            <span>互联网</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <el-button style="width: 346px; padding: 30px 0;">查看更多</el-button>
        </div>
    </div>

    <FixedMenu />
    <Footer></Footer>
</template>
<script setup lang="ts">
import { ref } from "vue"
let awardGrade = ref([
    "../../../public/image/01_icon@2x.png",
    "../../../public/image/02_icon@2x.png",
    "../../../public/image/03_icon@2x.png"
])
</script>
<style lang="scss" scoped>
.content {
    margin: 40px auto;
    width: 1080px;
    box-sizing: border-box;

    .body {
        display: flex;

        >.common-bo {
            display: flex;

            >.job-rank-wrap {
                display: flex;
                flex-direction: column;
                border-radius: 6px;
                margin-right: 20px;
                box-sizing: border-box;
                background: #FFFFFF;
                border: 1px solid #F1F1F1;
                width: 340px;
                cursor: pointer;
                padding: 20px 20px 20px 50px;

                h3 {
                    position: relative;
                    padding-left: 10px;
                    &::before {
                        content: "";
                        position: absolute;
                        background: url(https://cdn3.saikr.com/img/job/shixibang_icon@2x.png) no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        width: 20px;
                        height: 20px;
                        left: -22px;
                    }
                }

                .bear {
                    position: relative;

                    img {
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        left: -22px;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                }

                .rank-item {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #F1F1F1;
                    line-height: 55px;
                    position: relative;

                    span {
                        font-size: 14px;
                        height: 55px;
                    }

                    span:nth-child(1) {
                        position: absolute;
                        left: -20px;
                        width: 20px;
                        height: 20px;
                        background: #909EAB;
                        line-height: 20px;
                        text-align: center;
                        top: 50%;
                        transform: translateY(-50%);
                        border-radius: 10px;
                        color: #fff;
                        font-weight: 700;
                    }

                    span:nth-child(2) {
                        padding-left: 10px
                    }

                    span:nth-child(3) {
                        color: #D42C1E;
                        border-bottom: 1px solid #F1F1F1;
                    }

                    span:nth-child(4) {
                        color: #909EAB;
                        padding-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 100;
                    }
                }
            }
        }

        >.right {
            width: 720px;
            height: 400px;

            .right-botto {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
            }
        }
    }

    .floor-title {
        margin-bottom: 20px;
        font-size: 20px;
        border-bottom: 1px solid #0AA46D;
        color: #0AA46D;

        span {
            display: inline-block;
            border-bottom: 2px solid #0AA46D;
            padding-bottom: 10px;
        }
    }

    .recruit-floor {
        margin-top: 40px;
        width: 100%;

        >.floor-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .list-item {
                display: flex;
                flex-direction: column;
                border: 1px #ddd solid;
                margin: 20px 0;
                border-radius: 10px;
                transition: box-shadow 0.5s;

                span {
                    width: 253px;
                    text-wrap: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: 15px 10px;

                }

                &:hover {
                    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
                }
            }
        }


    }

    .practice-floor {
        .floor-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .list-item {
                padding: 20px;
                width: 346px;
                height: 170px;
                border: 1px #ddd solid;
                transition: box-shadow 0.5s;
                border-radius: 10px;
                margin: 10px 0;

                .item-top {
                    .top-title {
                        display: flex;
                        justify-content: space-between;
                        font-size: 18px;
                        color: #31363F;
                        overflow: hidden;
                        white-space: nowrap;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;

                        span:nth-child(2) {
                            color: #d42c1e;
                        }
                    }

                    .top-bottom {
                        font-size: 14px;
                        color: #909EAB;
                        line-height: 18px !important;
                        padding-bottom: 10px;
                        border-bottom: 1px #ddd solid;

                        span {
                            display: inline-block;
                            margin-right: 20px;
                            margin-top: 10px;
                            padding-right: 20px;
                            border-right: 1px #ddd solid;

                            &:last-child {
                                border-right: none;
                            }
                        }
                    }
                }

                .item-bottom {
                    display: flex;
                    align-items: center;
                    margin-top: 20px;

                    .bottom-company {
                        display: flex;
                        align-items: center;

                        span {
                            padding-left: 10px;
                        }
                    }

                    .bottom-info {
                        margin-left: 20px;

                        span {
                            padding: 0 10px;
                            border-right: 1px #ddd solid;

                            &:last-child {
                                border: none;
                            }
                        }
                    }
                }

                &:hover {
                    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
                }
            }
        }

    }
    .btn {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

}
</style>